import React from 'react'
import { _,Container, Button,Breadcrumbs,Typography } from '@/core';
import Header from '@/components/Layout/Header'
import CCarsousel from '@/components/Layout/Carsousel'
import Footer from '@/components/Layout/Footer'
import Menu from '@/components/Layout/Menu'
import MenuNav from '@/components/Layout/MenuNav'

const rightIcon = (
    <svg t="1660470080783" className="icon" viewBox="0 0 1024 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg" p-id="4939" width="28" height="28">
        <path d="M256 64l448 448-448 448z" p-id="4940"></path>
    </svg>
)
const getState = function(){
    let pathopt = _.getUrl();
    //
    return {
        menu:pathopt.menu,
        menuItem:pathopt.menuItem,
        menuKey:pathopt.menuKey,
        code:pathopt.code,
        list:[],
        files:[],
        count:0,
        page:1,
        size:10
    }
}

class ComContent extends React.PureComponent {

    goList = (item)=>{
        return ()=>{
            _.his.push(item.url)
        }
    }

    getArticle = ()=> {
        let code = this.state.code;
        _.api("page.detail",{cancelToken:"con_content",params:{"slug":code}}).then((res) => {
            let detail = res.data;
            let files = [];
            if(detail){
                if(detail.files){
                    try{
                        files = JSON.parse(detail.files);
                    }catch (e) {
                        //
                    }
                }
                this.setState({
                    _title:detail.title,
                    _create:detail.deployTime || detail.createTime,
                    _text:decodeURIComponent(detail.html),
                    files: files,
                },()=>this.renderNav(detail))
            }else{
                _.his.push("/resouce404")
            }
        })
    }


    state = getState()

    UNSAFE_componentWillMount(){
        this.getArticle();
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        let state = getState();
        if(state.menuKey != this.state.menuKey){
            this.setState(state,this.getArticle);
        }
    }

    renderFiles(){
        let files = this.state.files;
        if(files.length<1)return;
        return (
            <div className="content_file">
                <div className="tit">附件下载</div>
                {
                    files.map((item,i)=>(
                        <div className="row"><a href={item.url} target="_blank">{item.name}</a></div>
                    ))
                }
            </div>
        )
    }

    renderMenu(){
        let menu = this.state.menu;
        let menuKey = this.state.menuKey;
        if(menu.list.length){
            return (
                <div className="leftMenuFixed">
                    <div>
                        {/*<div className="title">{menu?.text}</div>*/}
                        {
                            menu.list.map((v,i)=>{
                                let active = menuKey == v.url;
                                return (
                                    <div className={`item ${active?'active':''}`} key={i} onClick={this.goList(v)}>
                                        {rightIcon}
                                        {v.text}
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            )
        }
    }

    render(){
        let st = this.state;
        return (
            <React.Fragment>
                <Header/>
                <CCarsousel />
                <Container >
                    <MenuNav onRef={(r)=>(this.renderNav = r)} />
                </Container>
                <Container className="con_content flr">
                    <Menu />
                    <div className="flbox rightContent">
                        <h3 className="title">
                            <div dangerouslySetInnerHTML={{__html:st._title}}></div>
                        </h3>
                        <h5 className="title_memo">发布时间：{st._create}</h5>
                        <div className="content">
                            <div dangerouslySetInnerHTML={{__html:global.httpTxt(st._text)}}></div>
                        </div>
                        {this.renderFiles()}
                    </div>
                </Container>
                <Footer/>
            </React.Fragment>
        )
    }
}

export default ComContent;
